<template>
	<div class="left-bottom">
		<div class="module-title">
			<span class="text">运动数据测试</span>
			<SelectView @change="change" />
		</div>

		<div class="left-bottom-chart" id="sport-chart"></div>

		<div class="left-list" v-if="show">
			<div class="above-div">
				<div class="above-one">
					姓名
				</div>
				<div class="above-first">平均血氧</div>
				<div class="above-first">最大血氧</div>
				<div class="above-first">最小血氧</div>
				<div class="above-first">收缩压</div>
				<div class="above-first">舒张压</div>
			</div>
			<div class="below-div">
				<div class="below-one">
					{{ userData.name }}
				</div>
				<ul>
					<li>{{ userData.controlRightLeft }}<span class="little-txt"></span></li>
					<li>平均心率</li>
					<li>
						{{ userData.farthestRightLeft }}<span class="little-txt"></span>
					</li>
				</ul>
				<ul>
					<li>{{ userData.bearCrawl }}<span class="little-txt"></span></li>
					<li>最大心率</li>
          <li>
            {{ userData.farthestRightLeft }}<span class="little-txt"></span>
          </li>
				</ul>
				<ul>
					<li>{{ userData.squatBack }}<span class="little-txt"></span></li>
					<li>最小心率</li>
					<li>
						{{ userData.squatHead }}<span class="little-txt"></span>
					</li>
				</ul>
				<ul>
					<li>{{ userData.controlLeftRight }}<span class="little-txt"></span></li>
					<li>疲劳度</li>
					<li>
						{{ userData.controlRightLeft }}<span class="little-txt"></span>
					</li>
				</ul>
				<ul>
					<li>{{ userData.balanceLeft }}<span class="little-txt"></span></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
import * as echarts from 'echarts';
import { sportOption } from './options';

import SelectView from './SelectView.vue';
import { getLeftBottomData } from '@/api';

export default {
	name: 'left-bottom',
	components: {
		SelectView,
	},
	data() {
		return {
			show: false,
			index: 0,
			list: [],
			base: {},
			timer: null,
			current: 1,
		};
	},
	mounted() {
		const chart = echarts.init(document.getElementById('sport-chart'));
		this.chart = chart;
		this.eventBus.$on('resize', () => {
			if (this.chart) this.chart.resize();
		});
	},

	computed: {
		userData() {
      console.log("飞飞飞",this.list[this.index])
			return this.list[this.index] || {};
		},
	},

	methods: {
		//  根据筛选条件 默认触发一次
		change(type) {
			this.getData(type);
		},

		loop() {
			this.show = true;
			clearInterval(this.timer);
			this.timer = setInterval(() => {
				this.index++;
				if (this.index >= this.list.length) {
					this.index = 0;
				}
				this.setChart();
				this.show = false;
				this.$nextTick(() => {
					this.show = true;
				});
			}, 5000);
		},

		async getData(type) {
			const { current } = this;
			const result = await getLeftBottomData({
				type,
				current: current,
				size: 30,
			});
			const { avg, list } = result;
			this.list = [...this.list, ...(list || [])];

			setTimeout(() => {
				if (list && list.length == 30) {
					this.current++;
					this.getData(type);
				}
			}, 5000);

			if (current == 1) {
				const {
					controlRightLeft,
					controlLeftRight,
					squatHead,
					squatBack,
					bearCrawl,
					balanceRight,
					balanceLeft,
					farthestRightLeft,
					farthestLeftRight,
				} = avg || {};
				this.base = {
					name: '平均',
					data: [
						controlRightLeft,
						controlLeftRight,
						squatHead,
						squatBack,
						bearCrawl,
						balanceRight,
						balanceLeft,
						farthestRightLeft,
						farthestLeftRight,
					],
				};

				this.loop();
				this.setChart();
			}
		},

		setChart() {
			const person = this.list[this.index];
			const {
				controlRightLeft,
				controlLeftRight,
				squatHead,
				squatBack,
				bearCrawl,
				balanceRight,
				balanceLeft,
				farthestRightLeft,
				farthestLeftRight,
				name,
			} = person || {};

			const data = [
				{
					name: name,
					data: [
						controlRightLeft,
						controlLeftRight,
						squatHead,
						squatBack,
						bearCrawl,
						balanceRight,
						balanceLeft,
						farthestRightLeft,
						farthestLeftRight,
					],
				},
				this.base,
			];
			const baseValue = this.base.data;
			const baseData = [
				{
					text: `平均血氧|${baseValue[0] || 0}`,
				},
				{
					text: `最大血氧|${baseValue[1] || 0}`,
				},
				{
					text: `最小血氧|${baseValue[2] || 0}`,
				},
				{
					text: `收缩压|${baseValue[3] || 0}`,
				},
				{
					text: `舒张压|${baseValue[4] || 0}`,
				},
				{
					text: `平均心率|${baseValue[5] || 0}`,
				},
				{
					text: `最大心率|${baseValue[6] || 0}`,
				},
				{
					text: `最小心率|${baseValue[7] || 0}`,
				},
				{
					text: `疲劳度|${baseValue[8] || 0}`,
				},
			];
			if (this.chart) {
				this.chart.clear();
				this.chart.setOption(sportOption(baseData, data));
			}
		},
	},
	beforeDestroy() {
		if (this.chart) this.chart.dispose();
		this.eventBus.$off('resize');
	},
};
</script>
<style lang="scss">
.left-bottom {
	padding: 0 2%;

	.left-bottom-chart {
		height: 35vh;
		margin: 1vh 0;
	}

	.left-list {
		height: 9.6296vh;
		display: grid;
		grid-template-rows: 2.4074vh 7.2222vh;
		font-size: 1.111vh;
		color: #fff;
		font-weight: 400;
		animation: fadeInAnimation 2s ease-in;

		.above-div {
			display: grid;
			grid-template-columns: 12% 17.6% 17.6% 17.6% 17.6% 17.6%;
			text-align: center;
			line-height: 2.4074vh;

			.above-one {
				background-color: rgb(255, 158, 77);
				font-weight: bolder;
			}

			.above-first {
				font-size: 1.3vh;
				background-color: rgba(255, 158, 77, 0.3);
			}
		}

		.below-div {
			display: grid;
			grid-template-columns: 12% 17.6% 17.6% 17.6% 17.6% 17.6%;

			.below-one {
				background-color: rgba(255, 158, 77, 0.45);
				text-align: center;
				line-height: 7.2222vh;
				font-weight: bold;
			}

			ul {
				background-color: rgba(255, 158, 77, 0.15);

				li {
					font-size: 1.3vh;
					line-height: 2.4074vh;
					text-align: center;
					height: 2.4074vh;

					&:nth-child(2) {
						background-color: rgba(255, 158, 77, 0.3);
					}

					.little-txt {
						font-size: 0.7vh;
					}
				}
			}
		}
	}
}
</style>
